<template>
  <view>
    <view class="zhanwei">

    </view>
    <view class="form-data">
      <uni-forms :model="formData" :border="true">
        <uni-forms-item label="姓名" name="name">
          <uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" :inputBorder="false" />
        </uni-forms-item>
        <uni-forms-item label="电话" name="phone">
          <uni-easyinput type="number" v-model="formData.phone" placeholder="请输入电话" :inputBorder="false" />
        </uni-forms-item>
        <uni-forms-item label="地区" name="area">
          <picker mode="region" @change="addressData">
            <view class="chooseAddress">
              {{addressDataList}}
            </view>
          </picker>
        </uni-forms-item>
        <uni-forms-item label="详细地址" name="street">
          <uni-easyinput type="textarea" v-model="formData.street" placeholder="请输入小区门牌号" :inputBorder="false" />
        </uni-forms-item>
      </uni-forms>
    </view>
    <!-- 标签处 -->
    <view class="label">
      <view class="label-title">标签：</view>
      <view :class="['label-item',item.tagId === chooseTagId ? 'active' : '']" v-for="(item,index) in tag" :key="index"
        @click="chooseTag(item.tagId)">
        {{item.tagName}}
      </view>
    </view>
    <!-- 是否选择默认地址 -->
    <view class="default-address">
      <view class="text">
        是否设置为默认收货地址
      </view>
      <u-switch v-model="inactiveValue" @change="changeDefaultAddress" active-color="black"></u-switch>
    </view>
    <!-- 保存 -->
    <view class="newAddress" @click="saveFullAddress">
      修改完成
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        inactiveValue: true,
        formData: {},
        addressDataList: '请选择所在省市区',
        // 标签组
        tag: [{
            tagName: '家',
            tagId: 1,
          },
          {
            tagName: '公司',
            tagId: 2,
          },
          {
            tagName: '学校',
            tagId: 3,
          }
        ],
        chooseTagId: 1,
        switch: ''
      };
    },
    methods: {
      // 修改默认地址
      changeDefaultAddress(e) {},
      addressData(event) {
        this.addressDataList = event.detail.value.join(',')
      },
      chooseTag(id) {
        this.chooseTagId = id
      },
      // 提交新地址
      async saveFullAddress() {
        const addressObj = {}
        addressObj.addressId = this.formData.addressId
        addressObj.name = this.formData.name
        addressObj.phone = this.formData.phone
        addressObj.region = this.addressDataList
        addressObj.street = this.formData.street
        addressObj.label = this.chooseTagId + ''
        if (this.inactiveValue) {
          this.switch = '0'
        } else {
          this.switch = '1'
        }
        addressObj.defaults = this.switch
        const res = await uni.$http.post('/personalcenter/addressrev', addressObj)
        if (res.data.code !== 200) return uni.$showMsg('修改失败')
        uni.$showMsg('修改成功')
        uni.redirectTo({
          url: '/subpkg/addressList/addressList'
        })
      }
    },
    onLoad(options) {
      const adressInfo = JSON.parse(decodeURIComponent(options.addressInfo));
      this.formData = adressInfo
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F5F6F9;
  }

  .default-address {
    margin-top: 30rpx;
    padding: 0 30rpx;
    display: flex;

    .text {
      margin-right: 40rpx;
      height: 30rpx;
      line-height: 55rpx;
    }
  }

  .label {
    .active {
      border: 1px solid black;
    }
  }

  .chooseAddress {
    color: #999999;
    font-size: 12px;
    line-height: 34px;
  }

  .zhanwei {
    height: 35px;
    background-color: white;
    margin-bottom: 20rpx;
  }

  .form-data {
    padding: 0 30rpx;
  }

  .label {
    display: flex;
    padding: 0 30rpx;
    align-items: center;

    view {
      margin-right: 30rpx;
    }

    .label-item {
      width: 60px;
      height: 28px;
      background-color: #EEF1F5;
      border-radius: 14px;
      text-align: center;
      line-height: 28px;
    }
  }

  .newAddress {
    width: 400rpx;
    margin: 20rpx auto;
    height: 70rpx;
    background-color: #000000;
    color: white;
    border-radius: 14px;
    line-height: 36px;
    text-align: center;
  }
</style>